<template>
  <el-card v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.1)" class="board-hover">
    <div slot="header">
      <span>Redis缓存信息</span>
      <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-refresh-right" @click="getlist()"> </el-button>
      <span class="tip">每小时自动刷新:{{loadTime}}</span>
    </div>
    <div class="board">
      <el-row :gutter="12">
        <el-col :span="12">
          <div class="board-title">使用内存</div>
          <div class="board-text" v-if="redis.info">{{ redis.info.used_memory_human }}</div>
        </el-col>
        <el-col :span="12">
          <div class="board-title">Key数量</div>
          <div class="board-text" v-if="redis.dbSize">{{ redis.dbSize }}条</div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
// redis信息获取
import { getCache } from "@/api/monitor/cache";

export default {
  name: "redis",
  data() {
    return {
      redis: {},
      loading: false,
      loadTime:'',
      // 定时刷新(秒)
      timeSec: 60*60,
      timeChecked: true,
      timer: {},
    }
  },
  created() {
    this.getlist();

    // 设置定时刷新
    if (this.timeChecked) {
      this.timer = window.setInterval(this.getlist, this.timeSec * 1000);
    } else {
      window.clearInterval(this.timer);
    }
  },
  methods: {
    getlist() {
      this.loading = true;
      getCache().then(res => {
        this.loadTime=this.parseTime(new Date());
        this.redis = res.data;
      }).finally(() => {
        this.loading = false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.board-hover {
  &:hover {
    box-shadow: 0 2px 12px 0 brown;
  }
}
.tip{
  float: right;
  color:gray;
  font-size: 10px;
  margin-right: 10px;
}
.board {
  .board-title {
    font-size: medium;
    color: white;
    text-align: center;
    padding: 15px;
    background-color: #304156;
    border-style: dashed;
    border-color: gray;
    border-width: 1px;
    border-bottom: none;
  }

  .board-text {
    font-size: 24px;
    color: darkslategray;
    text-align: center;
    padding: 15px;
    background-color: #E8F4FF;
    margin-bottom: 12px;
    border-style: dashed;
    border-color: gray;
    border-width: 1px;
    border-top: none;

    &:hover {
      color: brown;
      text-shadow: 2px 2px 5px;
    }
  }
}
</style>